<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      <el-container style="height: 80vh; border: 1px solid #eee">
        <el-container class="container_box">
          <el-aside width="250px" style="background-color: #fff">
            <departments
              :list="departmentList"
              @getcatatlogue="getcatatlogue"
            ></departments>
          </el-aside>
          <el-main>
            <div class="header_top">
              <div class="form--inline">
                <el-form
                  label-position="left"
                  :inline="true"
                  :model="searchForm"
                  class="demo-form-inline"
                >
                  <el-form-item :label-width="formLabelWidth" label="">
                    <el-input
                      v-model="searchForm.keyword"
                      placeholder="查找关键词"
                    ></el-input>
                  </el-form-item>
                  <el-form-item class="staff_form_btn">
                    <el-button type="primary" @click="getResultList">查找</el-button>
                  </el-form-item>
                  <el-form-item class="staff_form_btn">
                    <el-button type="primary" @click="dialogFormVisible = true"
                      >添加</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
              <el-divider></el-divider>
            </div>

            <div class="main_box_title">常见结果库</div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="index" label="序号" width="80">
              </el-table-column>
              <el-table-column
                prop="exceptionName"
                label="常用结果值"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="sequence"
                label="显示顺序"
                width="220"
              >
              </el-table-column>
              <el-table-column width="200" prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)"
                    type="primary"
                    size="small"
                    >编辑
                  </el-button>
                  <el-button
                    @click="remove(scope.row)"
                    type="danger"
                    size="small"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchForm.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="searchForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>

    <el-dialog
      title="编辑体检项目常用结果"
      :visible.sync="dialogFormVisible"
      width="1000px"
      class="top_dialog"
    >
      <el-form
        :model="form"
        :rules="rules"
        label-position="left"
        ref="ruleForm"
      >
        <div class="add_info">
          <div class="info_l">
            <div>
              <el-form-item
                class=""
                label="检查内容"
                :label-width="formLabelWidth"
              >
                <el-input v-model="this.navData.label" disabled></el-input>
              </el-form-item>
              <el-form-item
                label="常用结果词条内容"
                :label-width="formLabelWidth"
              >
                <el-input
                  type="textarea"
                  v-model="form.exceptionName"
                ></el-input>
                <p>如果常见结果值中有可选项部分，则用“[]”表示，中间选项值用“|”隔开。</p>
              </el-form-item>
              <el-form-item
                label="显示排序"
                :label-width="formLabelWidth"
              >
                <el-input v-model="form.sequence"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editForm('ruleForm')">保 存</el-button>
        <el-button @click="resetForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

import crumbs from "../../views/Crumbs.vue";
import departments from "../common/departments.vue";
import Template_slot from '../../views/template_slot.vue';

export default {
  components: {
    crumbs,
    departments,
    Template_slot,
  },
  data() {
    return {
      departmentList: [],
      total: 0,
      parentDepart: [],
      dialogFormVisible: false,
      tableData: [],
      formLabelWidth: "100px",
      searchForm: {
        exceptionName: ""
      },
      BreadCrumb: [
        { path: "", name: "基础管理" },
        { path: "", name: "常见结果库" },
      ],
      form: {
        status: 1,
      },
      rules: {
        parentDepart: [{ required: true, message: "请输入", trigger: "blur" }],
        entryContent: [{ required: true, message: "请输入", trigger: "blur" }],
        contentOptions: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        errorInfo: [{ required: true, message: "请输入", trigger: "change" }],
        healthGuid: [{ required: true, message: "请输入", trigger: "change" }],
      },
      navData :{}
    };
  },
  created() {
    this.getDepartmentList();
  },
  methods: {

    getDepartmentList() {
      let that = this;
      this.$axios.getDepartItemContentTree({}).then((res) => {
        if (res.code == "00000") {
          that.departmentList = res.data;

        }
      });
    },

    getcatatlogue(row) {
      this.navData = row
      this.searchForm.itemId = row.parentId;
      this.searchForm.contentId = row.id;
      this.getResultList();
    },

    getResultList() {
      this.doGetList(this.searchForm)
    },

    doGetList(req){
      this.$axios.queryDiagnosticResult(req).then((res) => {
        if (res.code == "00000") {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      });
    },

    editForm(formName) {
      if(!this.searchForm.itemId){
        this.$message({
          type: "error",
          message: "请在左侧选择对应项目",
        });
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = {
            ...this.form,
            itemId: this.navData.parentId,
            contentId: this.navData.id,
          };
          if (this.id == null) {
            this.$axios.insertDiagnosticResult({
                ...formData,
              }).then((res) => {
                if (res.code == "00000") {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                  this.dialogFormVisible = false;
                  this.getResultList()
                }
              });
          } else {
            this.$axios
              .updateDiagnosticResult({
                id: this.id,
                itemId: this.navData.parentId,
                contentId: this.navData.id,
                ...formData,
              })
              .then((res) => {
                if (res.code == "00000") {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                  this.dialogFormVisible = false;
                }
              });
          }
        }
      });
    },

    resetForm(){
      this.dialogFormVisible= false
      this.form={}
      this.id=null
    },

    handleClick(row) {
      this.form = row;
      this.id = row.id
      this.dialogFormVisible = true;
    },

    remove(e) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
            .delDiagnosticResult({
              id: e.id,
            })
            .then((res) => {
              if (res.code == "00000") {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.getResultList()
              }
            });
      });
    },
    // 每页几条
    handleSizeChange(val) {
      this.pageSize = val
      const req = {
        ...this.searchForm,
        pageSize:this.pageSize,
        pageNo:this.pageNo,
      }
      this.doGetList(req)
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val
      const req = {
        ...this.searchForm,
        pageSize:this.pageSize,
        pageNo:this.pageNo,
      }
      this.doGetList(req)
    },
  },
};
</script>

<style scoped>
.main_box_title {
  background: #fff;
  padding: 1%;
}

.aside_box_title {
  margin: 0px 8px 10px;
  /* text-align: center; */
}

.header_top .el-divider--horizontal {
  margin-top: 0px;
}

.el-main {
  padding: 0px;
  padding-left: 20px;
}

.staff_form_btn {
  margin-left: 20px;
}

.info_l {
  width: 80%;
  margin: 0px auto;
}

.info_l_input {
  width: 82%;
}

.info_l_button {
  margin-left: 10px;
}

.info_sel_r_groupn {
  margin-left: 40px;
}

.info_sel_r_group {
  margin-left: 10px;
}

.info_sel {
  display: flex;
}

.info_sel_l {
  width: 50%;
}

.info_sel_r {
  width: 50%;
  margin-left: 50px;
}

.info_sel_r_img {
  width: 180px;
  height: 220px;
  margin: 0px auto;
}

.avatar-uploader {
  margin: 0px auto;
  text-align: center;
}

.info_l /deep/ .el-select {
  width: 100%;
}

.info_l_head {
}

.form--inline /deep/ .el-form--inline .el-form-item__content input {
  width: 400px;
}

.form--inline /deep/ .el-form--inline .el-form-item__content textarea {
  width: 400px;
}
</style>
